<template>
    <div class="personna-info">
        <div class="topTitle">
            <div class="title-text title-padding">个人信息</div>
        </div>
        <div class="content-main">
            <div style="padding: 24px;">
                <span class="title-text">
                    基本信息
                </span>
                <el-button type="primary" style="float: right;adding: 24px;" @click="jumpIam" class="searchBtn">统一身份认证
                </el-button>
            </div>
            <div>
                <table class="table">
                    <tr>
                        <th rowspan="4" style="width: 6%;" class="thBackColor">
                            <img style="width: 64px;height: 64px;" src="../../assets/images/avatar.png" alt="">
                        </th>
                        <th class="th thBackColor" style="width: 10%;">
                            <span class="content-left">姓名：</span>
                        </th>
                        <th class="th ">
                            <span class="content-right">{{humanInfo.firstName |
                                ifValue}}</span>
                        </th>
                    </tr>
                    <tr>
                        <th class="th thBackColor" style="width: 10%;">
                            <span class="content-left">归属组织：</span>
                        </th>
                        <th class="th">
                            <span class="content-right">{{humanInfo.organizations.join('、') | ifValue}}</span>
                        </th>
                    </tr>
                    <tr>
                        <th class="th thBackColor" style="width: 10%;">
                            <span class="content-left">用户组：</span>
                        </th>
                        <th class="th">
                            <span class="content-right">{{humanInfo.groupList.join('、') | ifValue}}</span>
                        </th>
                    </tr>
                    <tr>
                        <th class="th thBackColor" style="width: 10%;">
                            <span class="content-left">公司邮箱：</span>
                        </th>
                        <th class="th">
                            <span class="content-right">{{humanInfo.email |
                                ifValue}}</span>
                        </th>
                    </tr>
                </table>
            </div>
            <div class="flex">
                <div style="width: 30%;margin-left: 24px;padding-top: 28px;" class="flex right-xian">
                    <div>
                        <img style="width: 48px; height: 48px" src="../../assets/images/mail.png" alt="">
                    </div>
                    <div style="padding-top: 8px;">
                        <div class="content-left">邮箱：</div>
                        <div class="content-right" style="margin-left: 16px;margin-top: 8px;">
                            {{humanInfo.email | ifValue}}</div>
                    </div>
                </div>
                <div style="width: 30%;margin-left: 16px;padding-top: 28px;" class="flex right-xian">
                    <div>
                        <img style="width: 48px; height: 48px" src="../../assets/images/phone.png" alt="">
                    </div>
                    <div style="padding-top: 8px;">
                        <div class="content-left">联系方式：</div>
                        <div class="content-right" style="margin-left: 16px;margin-top: 8px;">
                            {{humanInfo.phone | ifValue}}</div>
                    </div>
                </div>
                <div style="width: 20%;margin-left: 16px;padding-top: 28px;" class="flex">
                    <div>
                        <img style="width: 48px; height: 48px" src="../../assets/images/pass.png" alt="">
                    </div>
                    <div style="padding-top: 8px;">
                        <div class="content-left">密码：</div>
                        <div class="content-right" style="margin-left: 16px;margin-top: 8px;">******</div>
                    </div>
                    <div>
                        <el-button icon="el-icon-edit" class="deleteBtn edit-btn" @click="passwordDialog=true">
                            修改</el-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="table-main">
            <div class="title-text title-padding">登录信息</div>
            <div>
                <el-table :data="tableData" height="450" :border="false" :stripe="false" style="width: 100%">
                    <el-table-column type="index" label="序号" width="180">
                    </el-table-column>
                    <el-table-column prop="lastIpAddress" label="登录IP" width="180">
                    </el-table-column>
                    <el-table-column prop="lastLoginTime" label="登录时间">
                    </el-table-column>
                    <el-table-column prop="lastClientId" label="客户端">
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div>
            <el-dialog title="修改邮箱" :visible.sync="emailDialog" width="30%" @close="handleEmail"
                :close-on-click-modal="false">
                <el-form :model="emailform" :rules="emailformRule" ref="emailform" label-width="120px"
                    class="demo-dynamic">
                    <el-form-item label="输入密码" prop="password">
                        <el-input class="input" placeholder="请输入密码" v-model="emailform.password" show-password>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="邮箱号码" prop="email">
                        <el-input class="input" v-model="emailform.email" type="text" placeholder="邮箱号码" />
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="handleEmail" class="deleteBtn">取 消
                    </el-button>
                    <el-button type="primary" style="margin-left: 16px;" @click="emailUpData('emailform')"
                        class="searchBtn">确 定
                    </el-button>
                </div>
            </el-dialog>
        </div>
        <div>
            <el-dialog :visible.sync="passwordDialog" width="30%" @close="handlePass" :show-close="false"
                :close-on-click-modal="false">
                <template slot="title">
                    <div class="dialog-title">
                        <span class="dialog-text">修改密码</span>
                        <div class="button-right">
                            <span class="title-close" @click="handlePass">
                                <img src="../../assets/images/xxx.png" alt="">
                            </span>
                        </div>
                    </div>
                </template>
                <el-form :model="passWordform" :rules="passWordRule" ref="passWordform" label-width="120px"
                    class="demo-dynamic">
                    <el-form-item label="我的手机号：" prop="password" style="margin-top: 15px;">
                        <span>{{humanInfo.phone}}</span>
                    </el-form-item>
                    <el-form-item label="旧密码：" prop="oldPassword">
                        <el-input class="input" type="oldPassword" style="width: 85%;"
                            v-model="passWordform.oldPassword" autocomplete="off" show-password>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="新密码：" prop="newPassword">
                        <el-input class="input" type="newPassword" style="width: 85%;"
                            v-model="passWordform.newPassword" autocomplete="off" show-password>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="确认密码：" prop="confirmPassword">
                        <el-input class="input" type="password" style="width: 85%;"
                            v-model="passWordform.confirmPassword" autocomplete="off">
                        </el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="handlePass" class="deleteBtn">取 消
                    </el-button>
                    <el-button type="primary" style="margin-left: 16px;" @click="passUpdata('passWordform')"
                        class="searchBtn">确 定
                    </el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
<script>
    import { mapActions } from 'vuex'
    export default {
        name: "personnle-info",
        filters: {
            ifValue(val) {
                if (val) {
                    return val
                } else {
                    return '-'
                }
            },
        },
        data() {
            var validatePass = (rule, value, callback) => {
                if (value === '' || value === undefined) {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.passWordform.confirmPassword !== '') {
                        this.$refs.passWordform.validateField('confirmPassword');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '' || value === undefined) {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.passWordform.newPassword) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                ruleForm: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                humanInfo: {},
                rules: {
                    name: [
                        { required: true, message: '请输入活动名称', trigger: 'blur' },
                        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                    region: [
                        { required: true, message: '请选择活动区域', trigger: 'change' }
                    ],
                    date1: [
                        { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                    ],
                    date2: [
                        { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                    ],
                    type: [
                        { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                    ],
                    resource: [
                        { required: true, message: '请选择活动资源', trigger: 'change' }
                    ],
                    desc: [
                        { required: true, message: '请填写活动形式', trigger: 'blur' }
                    ]
                },
                srcList: [
                    'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
                ],
                tableData: [],
                phoneDialog: false,
                phoneform: {
                    password: ""
                },
                phoneformRule: {
                    phone: [
                        { required: true, message: '请填写手机号码', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请填写密码', trigger: 'blur' }
                    ],
                },
                emailDialog: false,
                emailform: {
                    password: ""
                },
                emailformRule: {
                    email: [
                        { required: true, message: '请填写邮箱号码', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请填写密码', trigger: 'blur' }
                    ],
                },
                passwordDialog: false,
                passWordform: {},
                passWordRule: {
                    oldPassword: [
                        { required: true, message: '请填写旧密码', trigger: 'blur' }
                    ],
                    newPassword: [
                        { required: true, validator: validatePass, trigger: 'blur' }
                    ],
                    confirmPassword: [
                        { required: true, validator: validatePass2, trigger: 'blur' }
                    ],
                },
                isSendBtn: '0',
                show: true,
                count: '',
                timer: null,

            }
        },
        created() {

            this.getHumanInfo()

        },
        methods: {
            ...mapActions('personnelManager', ['updatePwd']),
            getHumanInfo() {
                this.humanInfo = JSON.parse(JSON.stringify(this.$userInfo.userRep))
                var group = this.$userInfo.userGroupRep.map((item) => { return item.name })
                if (this.$userInfo.userRep.organizations !== null) {
                    var organizations = this.$userInfo.userRep.organizations.map((item) => { return item.name })
                    this.$set(this.humanInfo, 'organizations', organizations)
                } else {
                    this.$set(this.humanInfo, 'organizations', [])
                }
                this.$set(this.humanInfo, 'groupList', group)
                this.tableData = []
                this.tableData.push(this.$userInfo.userRep)
                console.log('this.humanInfo', this.humanInfo)
            },
            //关闭模态框
            handleCloser() {
                this.$refs['phoneform'].resetFields();
                this.phoneDialog = false

            },
            handleEmail() {
                this.$refs['emailform'].resetFields();
                this.emailDialog = false
            },
            handlePass() {
                this.isSendBtn = '0'
                this.$refs['passWordform'].resetFields();
                this.passwordDialog = false
            },
            //修改手机号码确认
            phoneUpData(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //修改邮箱号码确认
            emailUpData(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            quit() {
                localStorage.removeItem('vuex')
                this.$keycloak.logoutFn()
            },
            //修改密码确认
            passUpdata(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.updatePwd(this.passWordform)
                            .then(res => {
                                if (res.data.code !== '0') {
                                    return
                                }
                                this.$message.success('修改成功')
                                this.handlePass()
                                this.quit()

                            })
                            .catch(err => {
                                console.log(err)
                                this.loading = false
                            })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            jumpIam() {
                window.open(FRONT_CONFIG.apiServer.IAM_URL)
            },
            settime(val) {
                const TIME_COUNT = 60;
                this.isSendBtn = '2'
                if (!this.timer) {
                    this.count = TIME_COUNT;
                    this.show = false;
                    this.timer = setInterval(() => {
                        if (this.count > 0 && this.count <= TIME_COUNT) {
                            this.count--;
                        } else {
                            this.isSendBtn = '1'
                            this.show = true;
                            clearInterval(this.timer);
                            this.timer = null;
                        }
                    }, 1000)
                }
            }
        }
    }
</script>
<style lang="scss" scoped>
    .personna-info {
        .el-table thead {
            th {
                background-color: #E9ECF7;
                border-right: 0px;
                color: #62687f;
                font-size: 13px;
                line-height: 20px;
            }
        }

        .el-button:focus,
        .el-button:hover {
            color: #62687F;
            border-color: #c9d2e7;
            background-color: #ffffff;
        }

        .dialog-title {
            font-size: 16px;
            font-family: Source Han Sans CN, Source Han Sans CN-Medium;
            font-weight: 550;
            text-align: LEFT;
            color: #252631;
            line-height: 24px;
            background-color: #e9ecf7;
        }

        .dialog-text {
            font-size: 14px;
            font-family: Source Han Sans CN, Source Han Sans CN-Medium;
            font-weight: 550;
            text-align: LEFT;
            color: #252631;
            line-height: 35px;
            margin: 24px;
        }

        .el-dialog__header {
            padding: 0px 0px 0px 0px !important;
        }

        .el-dialog__body {
            padding: 0px 0px 0px 0px !important;
            color: #606266;
            font-size: 14px;
            word-break: break-all;
        }

        .button-right {
            float: right;
            margin: 3px 10px;
            line-height: 30px;
            color: #62687f;
            cursor: pointer;
        }

        .topTitle {
            width: 1920px;
            height: 50px;
            background: #ffffff;
            box-shadow: 0px 2px 4px 0px #d3d9ec;


        }

        .title-text {
            font-size: 16px;
            font-family: Source Han Sans CN, Source Han Sans CN-Medium;
            font-weight: 600;
            text-align: LEFT;
            color: #252631;
            line-height: 20px;

        }

        .title-padding {
            padding: 15px 0px 15px 24px;
        }

        .content-main {
            width: 98%;
            height: 312px;
            background: #ffffff;
            border-radius: 4px;
            box-shadow: 0px 2px 4px 0px #d3d9ec;
            margin: 24px;
        }

        .table-main {
            height: 550px;
            width: 98%;
            background: #ffffff;
            border-radius: 4px;
            box-shadow: 0px 2px 4px 0px #d3d9ec;
            margin: 24px;
        }

        .flex {
            display: flex;
        }

        .contant {
            line-height: 26px;
        }

        .content-left {
            font-size: 14px;
            font-family: Source Han Sans CN, Source Han Sans CN-Regular;
            font-weight: 400;
            text-align: LEFT;
            color: #62687F;
            line-height: 14px;
            margin-left: 16px;
        }

        .content-right {
            font-size: 14px;
            font-family: Source Han Sans CN, Source Han Sans CN-Regular;
            font-weight: 400;
            text-align: LEFT;
            color: #252631;
            line-height: 14px;
            margin-left: 10px;
        }

        .right-xian {
            /* border-right: 1px solid #c9d2e7; */
        }

        .edit-btn {
            border-radius: 34px;
            height: 24px;
            width: 70px;
            color: #62687F;
            border-color: #62687F;
            font-size: 10px;
            margin-top: 16px;
            margin-left: 18px;
            text-align: center;
            vertical-align: middle;
            padding-top: 5px;
        }

        .th {
            text-align: left;
            margin-left: 10px;
            border: 1px solid #c9d2e7;
        }

        .table {
            border: 1px solid #c9d2e7;
            width: 97.5%;
            margin: 0px 24px 0px 24px;
            line-height: 35px;
            border-collapse: collapse;
        }

        .thBackColor {
            background-color: #f5f7fd;
            ;
        }
    }
</style>
